<template>
    <div class="special-list">
          <yx-header>
            <template #left>
                <van-icon name="arrow-left" @click="$router.go(-1)"/>
            </template>
            <template #center>
               专栏列表
            </template>
            <template #right>
              
            </template>
        </yx-header>
        <div class="con">
            <ul>
                <li v-for="(item,index) in newList" :key="index" :style="{'background-image':`url(${item.pic})`}">
                    <h5>{{item.title}}</h5>
                    <p>{{item.descript}}</p>
                    <router-link :to="`/specialDetail/${item.id}`"  v-slot="{navigate,isActive}">
                      <span @click="navigate">查看详情</span>
                    </router-link>
                </li>
            </ul>

        </div>
    </div>
</template>
<script>
import yxHeader from '@/components/yxHeader'
import {ref,reactive,toRefs,computed} from 'vue'
import {useStore} from 'vuex'

import { Notify } from 'vant';
import {useRouter} from 'vue-router'
import {getNews} from '@/utils/home'
export default {
    setup(){
        const data = reactive({
            newList:[]
        })
        getNews().then(res=>{
            console.log(res)
            data.newList = res.data
        })
        return {...toRefs(data)}
    },
    components:{
        yxHeader
    }
}
</script>
<style lang="scss" scoped>
.con{
    padding:10px;
    ul{
        li{
            width:100%;
            height:184px;
            background-size:100% 100%;
            margin-top:10px;
            padding: 30px;
            text-align:center;
            h5{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                color:#fff;
                 margin-top:12px;
            }
            p{
               overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px;
                color:#fff; 
                 margin-top:12px;
            }
            span{
                border:1px solid #fff;
                padding:6px 10px;
                text-align:center;
                display:inline-block;
                font-size: 12px;
                color:#fff; 
                border-radius:20px;
                margin-top:10px;

            }
            
        }
    }
}
</style>
